<template>
  <div>
    <div class="historyTop">
      <h3 class="history" >搜索历史</h3>
    </div>

    <div class="historyBox" >
      <div class="his" v-for="(item,index) in list" :key="index" ref="hist">
        {{item}}
        <p class="delete"><van-icon name="cross" size="15" @click="deleted(index)" color="#999"/></p>
      </div>

    </div>
  </div>


</template>

<script>
export default {
name: "SearchHistory",
  data(){
    return{
      list:[],
      isShow:'',
    }
  },
  props:{
     his:String,

  },

  methods:{
    deleted(data){
      console.log(data)
      // this.isShow = !this.isShow
      this.$refs.hist[data].style.display = 'none'
      let list = JSON.parse(localStorage.getItem('list'))
      console.log(list)
      list.splice(data,1)
      localStorage.setItem('list',JSON.stringify(list))


    }
  },
  created(){
    if(localStorage.getItem('list')){
      this.list = JSON.parse(localStorage.getItem('list'))
    }
  },
  watch:{
    history(){

    },
    his(data){
      console.log(data)
      console.log(this.list)
      this.list.push(data)
      console.log(this.list)
      localStorage.setItem('list',JSON.stringify(this.list))
    }

  },
}
</script>

<style scoped lang="less">
.historyBox{
  display:flex;
  justify-content: flex-start;
  align-items: center;
  //border:1px solid red;
  padding:10px;
  overflow: hidden;
}
.historyTop{
  display:flex;
  justify-content: space-between;
  align-items: center;
  //border:1px solid blue;
  margin-top:5px;
  margin-bottom:5px;
  margin-left:5px;
}
.his{
  display:flex;
  border:1px solid #999;
  border-radius:10px;
  padding:5px;
  margin:5px 10px;
  position:relative;
  //overflow: hidden;
}
.history{
  margin-top:5px;
  margin-bottom:5px;
}
.delete{

  position:absolute;
  top:-20px;
  right:-8px;
}
</style>